<template>
    <div class="content">
        <h1 class="text-center">项目资金台账</h1>
        <el-row :gutter="20" class="mt30">
            <el-col :span="12">项目名称：{{ project.title }}</el-col>
            <el-col :span="12" class="text-right">合同完工期{{ project.start_date }}-{{ project.end_date }}</el-col>
        </el-row>
        <div class="text-right mt15">
            <el-button size="small" type="primary" @click="onSave">保存</el-button>
        </div>
        <el-descriptions class="mt30" :column="4" border size="large">
            <el-descriptions-item label="合同金额" label-class-name="my-label" class-name="my-content">{{ datas.price }}</el-descriptions-item>
            <el-descriptions-item label="增减金额" label-class-name="my-label" class-name="my-content"><el-input v-model="datas.gradation_price" /></el-descriptions-item>
            <el-descriptions-item label="审定金额" label-class-name="my-label" class-name="my-content"><el-input v-model="datas.examine_price" /></el-descriptions-item>
            <el-descriptions-item label="累计开票金额" label-class-name="my-label" class-name="my-content">{{ datas.invoice }}</el-descriptions-item>

            <el-descriptions-item label="累计到账金额" label-class-name="my-label" class-name="my-content"><el-input v-model="datas.account_price" /></el-descriptions-item>
            <el-descriptions-item label="已经支付金额" label-class-name="my-label" class-name="my-content">{{ datas.pay }}</el-descriptions-item>
            <el-descriptions-item label="目前现金余额" label-class-name="my-label" class-name="my-content"><el-input v-model="datas.balance_price" /></el-descriptions-item>
            <el-descriptions-item label="未支付金额" label-class-name="my-label" class-name="my-content"><el-input v-model="datas.no_pay_price" /></el-descriptions-item>

            <el-descriptions-item label="项目成本" label-class-name="my-label" class-name="my-content">{{ datas.cost }}</el-descriptions-item>
            <el-descriptions-item label="项目利润" label-class-name="my-label" class-name="my-content">{{ datas.profit }}</el-descriptions-item>
            <el-descriptions-item label="项目团队绩效考核" label-class-name="my-label" class-name="my-content"> -- </el-descriptions-item>
            <el-descriptions-item label="项目净利润" label-class-name="my-label" class-name="my-content"> -- </el-descriptions-item>
        </el-descriptions>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import http from '../../../../util/request'
import { ElMessage } from 'element-plus'

let project:any = sessionStorage.getItem('project')
project = JSON.parse(project)

const datas = ref<any>({})
const onGetData = () => {
    http.post('/statistics/overview',{}).then((response:any)=>{
        datas.value = response.data.data
    })
}

const onSave = () => {
    http.patch('/project/summary',{gradation_price:datas.value.gradation_price,examine_price:datas.value.examine_price,account_price:datas.value.account_price,balance_price:datas.value.balance_price,no_pay_price:datas.value.no_pay_price}).then((response:any)=>{
        if(response.data.code != 200){
            ElMessage.error(response.data.msg)
            return;
        }
        onGetData()
    })
}

onMounted(()=>{
    onGetData()
})
</script>

<style scoped>
:deep(.my-label) {
    width: 160px;
    height: 160px;
}
</style>